import ReactMarkDown from 'react-markdown'
export default ()=> {
  const mark = `       
  ## 1.系统自带
  icss？？？plugin时机以及自定义？？？

  webpack-dev-server:启动一个服务
  Compiler:用于创建出compilation 实例
  nodmon:修改后自动执行

  
  ### 1.1 系统入口 script
  + cross-env插件:可以正确设置环境变量，做了跨平台兼容处理
  + 添加cross-env:npm install --save-dev cross-env
  + 修改script
    "node scripts/start.js" 改成 "cross-env NODE_ENV=development node scripts/start.js"

  ### 1.2 scripts/start.js 解读
  - 设置环境变量 process.env.NODE_ENV、process.env.BABEL_ENV
  - 导入 env.js
  - 导入 webpack.config
  - 导入 webpackDevServer.config.js
  - 配置loader、plugin: configFactory(webpack.config.js)
  - 创建编译器:createCompiler
  - 设置代理
  - 写配置:代理，端口，url等配置
  - 创建本地服务：server
  - 设置server.callback：情况控制台、打开浏览器
  
  ### 1.3 path.js
  + 读取process.env.NODE_ENV
  + 读取envfile[.env.development.local, .env.local,.env.development]
  + dotenv配置读取envfile
  + 导出方法：获取客户端环境

  ### 1.4 webpack.config.js 返回的对象包括
  - entry
  - output
    - path
    - bundle.js
    - x.chunk.js
    - x.png x.txt 
  - cache
  - optimization
    - 如何解析js，压缩js
    - 如何压缩 css
  - resolve:如何寻找 modules
  - modules
    - rules 设置规则如何处理 各种后缀名 文件:.less,.jsx等
      - oneof:遍历所有loader,直到其中一个符合要求，即正则匹配到该格式
        - png，avif等设置最大size
        - 加载loader，举例:
          - 处理svg使用 @svgr/webpack、file-loader，
          - 处理jsx，js 使用babel-loader
          - 处理css，使用styleLoaders()获取loader
          - 处理css-module，使用styleLoaders()获取loader
          - 处理sass，使用styleLoaders()获取loader
          - 处理sass-module，使用styleLoaders()获取loader
          - 处理less，使用styleLoaders()获取loader
          - 处理less-module，使用styleLoaders()获取loader
  - plugins
    - HtmlWebpackPlugin
    - InlineChunkHtmlPlugin
    - InterpolateHtmlPlugin
    - WebpackManifestPlugin


  - webpackDevServer.config.js:配置server各个选项，有点专业不太懂
  ### 1.5 build.js
  - checkBrowsers
    - build
    - complier: webpack(config)
    - compiler.run


  ## 2.MSite   
  ### 1. 入口："cross-env NODE_ENV=development nodemon --watch build ./build/start.js"
  ### 2. start.js
  - webpack.dev.config
  - port
  - 获取webpackConfig:使用getDevConfig()(webpack.dev.config)
  - 配置server，利用webpackConfig
  - 创建编译器，利用webpackConfig
  - 创建server，利用编译器
  - 开启server
  ### 3. webpack.dev.config
  - webpack.base.config
  - webpackMerge(base,HotModuleReplacePlugin)
  ### 4.webpack.base.config 返回的对象包括
    - entry
    - output
    - reslove:定义@yhbase:'src/yhbase',ts tsx js jsx
    - module: 
      - rule:
        - 处理 js jsx:babel-loader
        - tsx: ts-loader
        - css: cssloader
        - less: 路径,lessloader
        - png,jpeg,svg,gif: url-loader
        - .ttf: file-loader
        - mp3: file-loader
    - plugins:
      - webpackplugin

  ### 5.build.js
  - webpackConfig
  - webpack(config,callback)

  ## 3.总结
    ### start
    - 第一步：配置server，端口号、代理等等
    - 第二步：webpackconfig，配置如何编译工程，包括不限于：入口，出口，如何编译sass，less，png等
    - 第三步:创建compiler: serverConfig
    - 第三步：创建server，传入webpackconfig、compiler
    - 第四步：开启server
    ### 自定义plugin
    - sentryPlugin,
    - DeleteSourcemapWebpackPlugin
    - UploadToQiniuWebpackPlugin
  ## 4. webpack 文档 start
  const Webpack = require('webpack');

  const WebpackDevServer = require('webpack-dev-server');

  const getDevWebpackConfig = require('./webpack.dev.config')


  //1. server的配置：proxy、port，header等

  const serverConfig = {}

  //2. webpackConfig

  //3.0 compiler

  const webpackConfig = getDevWebpackConfig()

  const compiler = Webpack(webpackConfig);

  //4.0 创建server

  const devServer = new WebpackDevServer(serverConfig,compiler)

  //5.0 开启server

  //第一种：start

  const runServer = async ()=> {
    await devServer.start()
  }

  //第二种

  devServer.startCallback(()=> {

  })
  ## 5.webpack 文档 build

  const webpack = require('webpack');

  const prodWebpackConfig = require('./webpack.prod.config')

  //第一种打包：传入callback

  //err: 只有 webpack 相关的问题，例如配置错误等

  //stats.hasErrors():编译错误

  webpack(prodWebpackConfig,(err, stats) => {

    if (err) {

      console.error(err.stack || err);

      if (err.details) {

        console.error(err.details);

      }
      
      return;
    }
    const info = stats.toJson();

    if (stats.hasErrors()) {
      console.error(info.errors);
      return;
    }

    if (stats.hasWarnings()) {
      console.warn(info.warnings);
    }
    console.log('打包成功')

  })

  //第二种打包：返回Compiler,手动执行
  const compiler = webpack(prodWebpackConfig)
  compiler.run((err,stats) => {
    compiler.close(closeError => {

    })
  })

  //第三种watch:会触发编译，变相手动执行

  const watching = compiler.watch({},(err, stats) => {

  })

  watching.close(closeError => {

  })

  //编译出多个js：MultiCompiler
  webpack([
    [
      {entry:"",output:{filename:''}},
      {entry:"",output:{filename:''}}
    ]
  ],(err, stats) => {})


  `
  return (
    <div style={{padding:'20px'}}>
      <ReactMarkDown >
        {mark}
      </ReactMarkDown>
     
    </div>
  )
}